<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.ui-widget {
	font-size: 9px !important;
}

.size {
	width: 800px;
	position: relative;
	left: 17%;
	top: 10%;
}

.centro {
	top: 50%
}

.tabela {
	width: 730px;
}
</style>

	<title>Departamento</title>
</h:head>

<h:body>
	<ui:decorate template="/templateBase.xhtml">
		<ui:define name="center">
			<p:growl life="3000" id="growl" />
			<h:form id="formDepartamento" acceptcharset="ISO-8859-1" lang="pt">
				<br />
				<br />
				<br />

				<p:panel header="Cadastro de Departamento" styleClass="size"
					footer="SAIES - Sistema de Avaliação Institucional do Ensino Superior">
					<br />
					<p:tabView>
						<p:tab title="Dados do departamento">

							<h:panelGrid columns="3">
								<h:outputText value="ID:" />
								<p:inputText size="8" disabled="true"
									value="#{departamentoBacking.deptoSalvar.id}" />
								<p:commandButton icon="ui-icon-search"
									oncomplete="dlgPesquisaDepto.show()" />
							</h:panelGrid>

							<h:panelGrid columns="1">
								<h:outputText value="Nome" />
								<p:inputText size="70"
									value="#{departamentoBacking.deptoSalvar.nome}" />
								<h:outputText value="E-mail" />
								<p:inputText size="40"
									value="#{departamentoBacking.deptoSalvar.emailDepartamento}" />
								<h:outputText value="Missão/Objetivo/Função" />
								<p:inputTextarea autoResize="true" cols="50" rows="5"
									value="#{departamentoBacking.deptoSalvar.atribuicao}"
									maxlength="400" style="width:600px" />
							</h:panelGrid>
							<br />

							<div align="center">
								<h:panelGrid columns="2">
									<p:commandButton value="Gravar"
										actionListener="#{departamentoBacking.salvarDepartamento}"
										ajax="false" />
									<p:commandButton value="Limpar" />
								</h:panelGrid>
							</div>
						</p:tab>

						<p:tab title="Colaboradores">

							<p:dataTable value="#{departamentoBacking.listaFuncDepto}"
								var="d" id="tblFunc"
								emptyMessage="Não consta nenhum colaborador cadastrado!!">

								<p:column headerText="ID">
									<div align="center">
										<h:outputText value="#{d.func.id}" />
									</div>
								</p:column>

								<p:column headerText="Nome">
									<h:outputText value="#{d.func.nome}" />
								</p:column>

								<p:column headerText="Cargo">
									<div align="center">
										<h:outputText value="#{d.func.cargo.descricao}" />
									</div>
								</p:column>
							</p:dataTable>
						</p:tab>
					</p:tabView>
				</p:panel>
			</h:form>

			<h:form>
				<p:dialog widgetVar="dlgPesquisaDepto" header="Departamentos"
					footer="SAIES - Sistema de Avaliação Institucional do Ensino Superior"
					height="300" width="500" showEffect="clip" hideEffect="clip">
					<p:dataTable value="#{departamentoBacking.listaDepartamento}"
						var="d" emptyMessage="Não consta nenhum departamento cadastrado!">

						<p:column headerText="ID">
							<div align="center">
								<h:outputText value="#{d.id}" />
							</div>
						</p:column>

						<p:column headerText="Departamento">
							<h:outputText value="#{d.nome}" />
						</p:column>

						<p:column headerText="E-mail">
							<div align="center">
								<h:outputText value="#{d.emailDepartamento}" />
							</div>
						</p:column>

						<p:column headerText="Ações">
							<div align="center">
								<p:commandButton icon="ui-icon-check"
									actionListener="#{departamentoBacking.criaListaFuncionario(d)}"
									ajax="false" oncomplete="dlgPesquisaDepto.hide()"
									update=":formCadDepto:tblFunc" />
							</div>
						</p:column>
					</p:dataTable>
				</p:dialog>
			</h:form>

		</ui:define>
	</ui:decorate>
</h:body>
</html>